<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon"
    href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
    mce_href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
    type="image/x-icon" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Archer</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
    }

    /*自己加的*/
    .form-container {
      width: 300px;
      margin: 0 auto;
    }

    h1 {
      text-align: center;
    }

    label, input {
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #8d3d3d;
      border-radius: 4px;
    }

    input[type="submit"] {
      width: 100%;
      padding: 10px;
      border: none;
      background-color: #63b465;
      color: white;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: #45a049;
    }
    /*自己加的*/

    .title-logo {
      width: 358px;
      height: 211px;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media screen and (min-width:1200px) {
      body .container {
        margin: auto;
      }
    }

    @media screen and (max-width:1919px) {
      body .container {
        margin-top: 76px;
        margin-bottom: 128px;
      }
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 320px;
    }

    .title-text {
      width: 320px;
      height: 48px;
      text-align: center;
      margin-top: 16px;
      font-size: 32px;
      opacity: 0.9;
      font-weight: 500;
      font-size: 32px;
      color: #000000;
      letter-spacing: 0;
      line-height: 48px;
    }

    .hr small {
      display: inline-block;
      background-color: white;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="title">
      <img class="title-logo"
        src="img/archer.jpg" />
      <div style="display: inline; margin-bottom: 48px" class="title-text">打弓人来玩了</div>
    </div>
  </div>
  <div class="form-container">
    <form onsubmit="return validate()">
      <label for="username">昵称</label>
      <input type="text" id="username" name="username" placeholder="请输入昵称">

      <label for="password">密码</label>
      <input type="password" id="password" name="password" placeholder="请输入密码">
      <p style="font-size: 12px">无账号点击登录直接注册并进入界面(〃'▽'〃)</p>
      <input type="submit" value="Login">
    </form>
  </div>
</body>
<script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
  init();
  function init() {
    $.ajax("/api/count", {
      method: "get",
    }).done(function (res) {
      if (res && res.data !== undefined) {
        $(".count-number").html(res.data);
      }
    });
  }
  function set(action) {
    $.ajax("/api/count", {
      method: "POST",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      data: JSON.stringify({
        action: action,
      }),
    }).done(function (res) {
      if (res && res.data !== undefined) {
        $(".count-number").html(res.data);
      }
    });
  }
  function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    if (username == "" || password == "") {
      alert("请输入用户名和密码");
      return false;
    }else {
      const data = {
        name: username,
        password: password
      };
      $.ajax("/login", {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(data),
      }).done(function (res) {
        if (res && res.data !== undefined) {
          if (res.code===200){
            window.location.href = "home.html";
            return true;
          }else{
            alert(res.errorMsg);
            return false;
          }
        }
      });
      return false;
    }
  }
</script>

</html>